<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
	<style>
		[v-cloak]{display: none;}
	</style>
</head>
<body>
<div v-cloak id="app">
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">添加品牌</h3>
		</div>
		<div class="panel-body form-inline">
			<label for="">Id: <input type="text" v-model="id" class="form-control"></label>
			<label for="">Name: <input type="text" v-model="name" class="form-control" @keyup.enter="add"></label>
			<input type="button" value="添加" @click="add" class="btn btn-primary">
			<label for="">搜索关键字: <input type="text" v-model="keyworld" class="form-control"></label>
		</div>
	</div>
	<table class="table table-bordered table-hover table-striped">
		<thead>
			<tr>
				<th>Id</th>
				<th>Name</th>
				<th>Ctime</th>
				<th>Operation</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(item,index) in search()" :key="item.id">
				<td>{{ item.id }}</td>
				<td v-text="item.name"></td>
				<td>{{ item.ctime|timeFormat('yyyy-MM-dd hh:ii:ss') }}</td>
				<td>
					<a href="http://baidu.com" @click.prevent="del(index)">删除</a>
				</td>
			</tr>
		</tbody>
	</table>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<!-- 注意：vue-resource 依赖于 Vue,所以先后顺序要注意 -->
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
<script>
var vm = new Vue({
	el : '#app',
	data:{
		id:'',
		name:'',
		keyworld:'',
		list:[
			// {id : 1, name : '奔驰', ctime : new Date()},
			// {id : 2, name : '宝马', ctime : new Date()}
		]
	},
	methods:{
		add(){
			this.list.push({id:this.id, name:this.name, ctime:new Date()})
			this.name = this.id = ''
		},
		del(index){
			if ( ! confirm('确定要删除吗?')) {
				return
			}
			this.list.splice(index, 1)
		},
		search(){
			return this.list.filter(item=>item.name.includes(this.keyworld))
		},
		
	},
	created(){
		this.$http.get('http://localhost:3000/getprodlist')
		.then(result=>{
			console.log(result.data);
			// this.list = result.data
		})
	},
	filters:{
		timeFormat:function(data,pattern=""){
			var t = new Date(data)
			var year = t.getFullYear()
			var month = (t.getMonth() + 1).toString().padStart(2, '0')
			var day = t.getDate().toString().padStart(2, '0')
			var format = `${year}-${month}-${day}`
			if (pattern.toLowerCase() === 'yyyy-mm-dd') {
				return format
			}
			var h = t.getHours().toString().padStart(2, '0')
			var i = t.getMinutes().toString().padStart(2, '0')
			var s = t.getSeconds().toString().padStart(2, '0')
			return `${format} ${h}:${i}:${s}`
		}
	}
})
</script>
</body>
</html>